<template>
    <div>
        <div class="login-boxtitle" style="height: 100px;">
            <div class="logoBig">
                <img src="static/images/logo.png" style="margin-left: 0px ; height: 100px;">
            </div>
        </div>
        <div class="login-banner" id="container">
            <div class="login-main" >
                <div class="login-banner-bg"><span></span><img src="../assets/images/big.jpg" /></div>
                <div class="login-box" style="margin-top: 20px;">
                    <h3 class="title">登录商城</h3>
                    <h5 :style="colorStyle" id="tips">{{tips}}&nbsp;</h5>
                    <div class="clear"></div>
                    <div class="login-form"  style="background: none; margin-top: 15px;">
                        <form>
                            <div class="user-name"  style="margin-top: 20px;">
                                <label><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
                                <input type="text" v-model="userName" placeholder="邮箱/手机/用户名" @keyup="checkInfo">
                            </div>
                            <div class="user-pass"  style="margin-top: 20px;">
                                <label><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
                                <input type="password" v-model="password" placeholder="请输入密码" @keyup="checkInfo">
                            </div>
                        </form>
                    </div>
                    <div class="login-links" >
                        <label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>
                        <a href="#" class="am-fr">忘记密码</a>
                        <br />
                    </div>
                    <div class="am-cf">
                        <input type="submit"  value="登 录" class="am-btn am-btn-primary am-btn-sm" @click="submit">
                    </div>
                    <div class="am-cf">
                        <input type="button" @click="doget" value="注 册" class="am-btn am-btn-default am-btn-sm">
                    </div>
                    <div class="partner">

                    </div>

                </div>
            </div>
        </div>

        <div class="footer ">
            <div class="footer-hd ">
            </div>
            <div class="footer-bd ">
                <p>
                    <a href="# ">联系我们</a>
                    <a href="# ">网站地图</a>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                userName:"",
                password:"",
                tips:"",
                colorStyle:"color:red",
                isRight:false,
                userId:0
            }
        },
        methods:{
            checkInfo(){
                if(this.userName == ""){
                    this.tips = "请输入账号！！";
                    this.isRight=false;
                }else if(this.password.length<6 || this.password.length>12){
                    this.tips = "密码长度大于6小于12";
                    this.isRight = false;
                }else{
                    this.tips = "";
                    this.isRight = true;
                }
            },
            submit(){
                if (this.isRight) {
                    this.axios.get('http://localhost:8080/user/login',{
                        params:{
                            userName:this.userName,
                            password:this.password
                        }
                    }).then((response) => {
                        if(response.data.code == 1000){
                            //如果登录成功，就把token存储到cookie
                            window.localStorage.setItem("token",response.data.msg);
                            this.userId = response.data.data.userId;
                            console.log(response.data);
                            this.$router.push("/");
                        }else{
                            this.tips = "登录失败，账号或密码错误！";
                        }
                    });
                }else{
                    this.tips= "请正确 账号和密码";
                }
            },
            doget(){
                this.$router.push(`/regist`)
            }
        }
    }
</script>

<style scoped>
@import "../assets/css/amazeui.css";
@import "../assets/css/dlstyle.css";
@import "../assets/css/bootstrap.css";
</style>